<template>
<div class="order">
    <div class="title">
    <h2>我的订单</h2>
  </div>
  <div class="order-container">
    <van-tabs v-model="activeTab">
      <!-- 全部订单 -->
      <van-tab :title="'全部 (' + allOrdersCount + ')'">
        <OrderCard @refreshOrders="loadData" :orders="orderList"/>
      </van-tab>

      <!-- 待接单订单 -->
      <van-tab :title="'待付款 (' + pendingfqCount + ')'">
        <OrderCard :orders="filteredOrders('待付款')"/>
      </van-tab>

      <!-- 待配送订单 -->
      <van-tab :title="'待收货 (' + pendingshCount + ')'">
        <OrderCard :orders="filteredOrders('待收货')"/>
      </van-tab>

      <!-- 待收货订单 -->
      <van-tab :title="'待评价 (' + pendingpjCount + ')'">
        <OrderCard :orders="filteredOrders('待评价')"/>
      </van-tab>

      <!-- 待评价订单 -->
      <van-tab :title="'已完成 (' + pendingwcCount + ')'">
        <OrderCard :orders="filteredOrders('已完成')"/>
      </van-tab>

      <van-tab :title="'已失效 (' + pendingsxCount + ')'">
        <OrderCard :orders="filteredOrders('已失效')"/>
      </van-tab>
    </van-tabs>
  </div>
  <TabBar></TabBar>
</div>
</template>

<script setup>
import {ref, computed,onBeforeMount} from 'vue';
import OrderCard from '@/components/OrderCard.vue';
import TabBar from "@/components/TabBar.vue";
import requestUtil from "@/utils/request.js";
import Cookies from 'js-cookie';
const activeTab = ref(0);
let orderList = ref([]);
const loadData = async () => {
  let res = await requestUtil.post('/app/getOrder/',{userId:Cookies.get('userId')});
  orderList.value = res.data.data;
}
onBeforeMount(() => {
  loadData();
})

// 计算每个状态下订单的数量
const allOrdersCount = computed(() => orderList.value.length);
const pendingfqCount = computed(() => orderList.value.filter(order => order.status === '待付款').length);
const pendingshCount = computed(() => orderList.value.filter(order => order.status === '待收货').length);
const pendingpjCount = computed(() => orderList.value.filter(order => order.status === '待评价').length);
const pendingwcCount = computed(() => orderList.value.filter(order => order.status === '已完成').length);
const pendingsxCount = computed(() => orderList.value.filter(order => order.status === '已失效').length);

// 根据当前选中的 Tab 筛选订单
const filteredOrders = (status) => {
  return orderList.value.filter(order => order.status === status);
};
</script>


<style scoped>
.order{
  padding-bottom: 100px;
}
.title {
  text-align: center;
  margin-bottom: 10px;
}

.order-container {
  margin: 0 auto;
  padding: 10px;
}

.van-tabs__nav {
  display: flex;
  justify-content: space-around;
  border-top: #8e8d8d 1px solid;
  border-bottom: #8e8d8d 1px solid;
}

.van-tab {
  flex: 1;
  text-align: center;
  font-size: 16px;
  color: #333;
  padding: 10px 0;
}

.van-tab--active {
  color: #f3cb4c;
  font-weight: bold;
  border-bottom: 2px solid #f3cb4c; /* 添加下划线，颜色与字体颜色相同 */
  padding-bottom: 5px; /* 为了让下划线更显眼，适当调整下方的内边距 */
}

.van-tab__icon {
  display: none;
}
</style>
